<template>
  <div class="page-main">
    <query-page
      ref="pageRef"
      v-model:selectedKeys="selectedKeys"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :title="tit"
      bordered
      :span-method="spanMethod"
      :data="renderData"
      :total="total"
      row-selection-type="checkbox"
      @selection-change="selectionChange"
      @query-data="getData"
    >
      <template #operate="{ record, rowIndex }">
        <batchBtn
          :btn-list="rowBtnList"
          :other-params="{ record, rowIndex, activeTab, activeRadio }"
          type="2"
          @result="rowClickResult"
        ></batchBtn>
      </template>
    </query-page>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, watch } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import { pageForCondition } from '@/api/supplier/parity-sheet';
  import {
    formRenderConfig,
    formComponentConfig,
  } from './components/formComp/baseFormConfig';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from './components/tableComp/baseTableConfig';
  import { baseRenderKeys } from './components/baseDatasheet';
  import { getBtnList } from './components/baseBtnparitysheet';
  import { getRowBtnList } from './components/rowBaseparitysheet';
  import batchBtn from './components/batchBtn.vue';

  const tit = ref('比价单查询');
  const selectedKeys = ref([]);
  const activeTab = ref('');
  const activeRadio = ref('');
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  // 渲染检索项
  const formRenderKeys = ref<any[]>([]);
  const tableRenderKeys = ref<any[]>([]);
  const pageRef = ref();
  // 下拉内容数据
  const selsectlist = ref<any[]>([
    { label: '男', value: 1 },
    { label: '女', value: 2 },
  ]);
  const total = ref(0);
  formRenderKeys.value =
    baseRenderKeys.comparisonsheetgeneratedSearch.formRenderKeys;
  tableRenderKeys.value =
    baseRenderKeys.comparisonsheetgeneratedSearch.newTableRenderKeys;
  const btnList = ref<any[]>([]);
  const rowBtnList = ref<any[]>([]);
  const getData = async (queryInfo: object) => {
    isLoading.value = true;
    try {
      const res: any = await pageForCondition(queryInfo);
      if (res.code === 200) {
        renderData.value = res.data.list;
        total.value = res.data.total;
        console.log(res);
      }
    } catch (err) {
      console.log(err);
    } finally {
      isLoading.value = false;
    }
  };

  const selectionChange = async (val: string[]) => {
    console.log(val);
  };
  // 列表操作列点击事件
  const rowClickResult = async (
    type: string,
    typeChange: string,
    rowParams: any
  ) => {
    console.log(type, typeChange, rowParams);
  };
  const spanMethod = ({ rowIndex, column }: any) => {
    let result = {};
    result = {};
    if (
      renderData.value[rowIndex][column.dataIndex] && // 空数据不合并
      [
        'compareNo',
        'planListNo',
        'mdsItemName',
        'mdsItemCode',
        'planArrivalDate',
        'refuseReason',
        'pmsMdsUnitName',
      ].includes(column.dataIndex) && // 需要进行合并的列
      !(
        rowIndex > 0 &&
        renderData.value[rowIndex][column.dataIndex] ===
          renderData.value[rowIndex - 1][column.dataIndex]
      ) // 合并过的不合并
    ) {
      for (let i = 0; i <= renderData.value.length; i += 1) {
        if (
          !(
            renderData.value[rowIndex + i] &&
            renderData.value[rowIndex][column.dataIndex] ===
              renderData.value[rowIndex + i][column.dataIndex]
          ) ||
          i === renderData.value.length // 直到不满足合并条件抛出
        ) {
          result = {
            rowspan: i,
          };
          break;
        }
      }
    }
    return result;
  };
  const initData = async () => {
    btnList.value = getBtnList(
      activeTab.value,
      activeRadio.value,
      // selectedKeys.value,
      selsectlist.value
    );
    rowBtnList.value = getRowBtnList(activeTab.value, activeRadio.value);

    // console.log('rowBtnList.value', rowBtnList.value);
  };

  watch(activeTab, () => {
    // console.log(newval, oldval, 'activeTab');
    activeRadio.value = '1';
    initData();
  });

  watch(activeRadio, () => {
    // console.log(newval, oldval, 'activeRadio');
    initData();
  });

  onMounted(() => {
    activeTab.value = '1';
    activeRadio.value = '1';
    initData();
  });
</script>

<style lang="less" scoped>
  .outbox {
    // width: 100%;
    // height: 100%;
    margin: 16px;
  }

  .supbox {
    // margin: 8px;
    padding: 0 24px 16px;
    background-color: white;
    border-radius: 6px;
  }

  .page-con {
    height: 100%;
    padding: 20px;
    background-color: #fff;
  }

  .radio-ara {
    display: flex;
    justify-content: space-between;
    width: 17.5%;
  }

  ::v-deep .arco-form-item {
    background: #fff;

    &:focus-within {
      border-color: #165dff;
    }

    .arco-form-item-wrapper-col {
      // border: 1px solid #d9dee7;
      border-radius: 3px;
    }

    .arco-picker-size-medium {
      width: 100%;
    }

    .arco-input-wrapper,
    .arco-picker,
    .arco-select-view-single {
      padding-left: 0;
      background-color: transparent;
      border-color: transparent;
    }
  }
</style>
: any: any
